<template>
  <app-page card>
    <el-form ref="formRef" :model="formData" label-width="105px" :style="'max-width:400px'">
      <jax-form-group v-model="formData" :json="formJson" />
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </app-page>
</template>

<script setup>
import { http } from 'jax-node'
import { ElMessage } from 'element-plus'

const formRef = ref()
const formData = ref({})

const formJson = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }
  const pwdInput = {
    attr: {
      maxlength: 12,
      minlength: 6,
    },
  }

  return [
    {
      type: 'password',
      name: 'originalPassword',
      label: '原始密码',
      required,
      // input: pwdInput,
    },
    {
      type: 'password',
      name: 'password',
      label: '新密码',
      required,
      // input: pwdInput,
    },
    {
      type: 'password',
      name: 'confirmPassword',
      label: '确认新密码',
      required,
      // input: pwdInput,
    },
  ]
})

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    http
      .put(
        `/system/user/modify-password`,
        {
          originalPassword: formData.value.originalPassword,
          password: formData.value.password,
        },
        { showLoading: '修改中...' }
      )
      .then(res => {
        ElMessage.success('保存成功')
        formData.value = {}
        localStorage.clear()
      })
  })
}
</script>

<style lang="scss" scoped></style>
